<template>
	<view class="shareLists">
		<view class="list list-1">
			<image :src="data.imgurl" mode="widthFix"></image>
			<view class="date">
				<view class="day">
					{{dateObj.day}}
				</view>
				<view class="weeks">
					<text class="time">{{dateObj.date}}</text>
					<text class="padd">星期{{dateObj.week}}</text>
					<text class="padd">{{weather.weather}}</text>
					<text class="padd">{{weather.temp}}</text>
				</view>
			</view>
			<view class="copywriting">
				<text>{{data.word}}</text>
			</view>
			<view class="author">
				<text>-- {{data.wordfrom}}</text>
			</view>
			<view class="custom">
				<textarea class="textarea" v-model="customValue" placeholder="请输入自定义文案" />
			</view>
			<view class="code">
				<!-- 第一个用canvas画，其他用图片 -->
				<view class="users">
					<image :src="avatar ?  avatar : require('../../../../static/images/avatar.png')" mode="aspectFill"></image>
					<view class="user-name">
						<text>{{username}}</text>
						<text>邀请码:{{code}}</text>
					</view>
				</view>
				<tki-qrcode cid="qrcode1" ref="qrcode"
				:val="url" 
				:size="size" 
				:unit="unit" 
				:background="background" 
				:foreground="foreground" 
				:pdground="pdground" 
				:icon="icon" 
				:iconSize="iconsize" 
				:lv="lv" 
				:onval="onval" 
				:loadMake="loadMake" 
				:usingComponents="true"
				@result="qrR"/>
			</view>
			<view class="btns">
				<view class="btn exempt">
					<text>免激活</text>
				</view>
				<view class="btn" @click="setCanvas()">
					<text>生成海报</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/uni_modules/tki-qrcode/tki-qrcode.vue'
	import {logo} from '@/utils/base64.js'
	
	export default{
		name:"shareLists",
		components:{
			tkiQrcode
		},
		props:{
			data:{
				type:Object,
				default(){
					return {}
				}
			},
			url:{
				type:String,
				default:''
			},
			avatar:{
				type:String,
				default:''
			},
			username:{
				type:String,
				default:''
			},
			code:{
				type:String,
				default:''
			},
			address:{
				default(){
					return {}
				}
			},
			dateObj:{
				default(){
					return {}
				}
			},
			weather:{
				default(){
					return {}
				}
			}
		},
		data(){
			return{
				customValue:"",//自定义文案
				show:false,
				size: 160, // 二维码大小
				unit: 'upx', // 单位
				background: '#eeeeee', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#2C405A', // 角标色
				icon: logo, // 二维码图标
				iconsize: 10, // 二维码图标大小
				lv: 1, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '',//临时图片路径
			}
		},
		methods:{
			qrR(res) {
				this.src = res
				this.$emit("codeSrc",res)
			},
			setCanvas(){
				this.$emit("drawAll")
			}
		},
		watch:{
			customValue(newVal){
				this.$emit("customValue",newVal)
			}
		}
	}
</script>

<style scoped lang="less" src="./shareLists.less">
</style>
